import type { VxeGridProps } from '@vben/plugins/src/vxe-table/types';

import type { TableType } from '#/views/onlineDesign/designPage/template/table/type/TableType';

import { ref } from 'vue';

import { toCamelCase } from '#/views/onlineDesign/designPage/template/methods/commonMethod';

const treeNode = ref(false);

/**
 * 默认生成表格项
 * @param fields 字段信息
 * @param type 类型 0Table 1TreeTable
 * @param config 配置JSON
 */
export const defaultToGenerateColumns = async (
  fields: Array,
  type: number = 0,
  config: any,
): VxeGridProps['columns'] => {
  // 先过滤掉 fieldName 为 'del_flag' 的字段
  const filteredFields = fields.filter(
    (field) => field.fieldName !== 'del_flag',
  );
  treeNode.value = false;
  // 映射字段到列配置
  const mappingFieldsToColumns = filteredFields.map((field, index) => {
    let showType = 'text';
    let extra;
    // 关联（0否 1是）
    if (field.fieldRelevance === 1) {
      // 关联模式（0关联模型 1关联字典）
      showType = field.fieldRelevanceMode === 1 ? 'dict' : 'dictTable';
      if (field.fieldRelevanceMode === 1) {
        config.table.extra.dict.exist = true;
        if (
          !config.table.extra.dict.dictCodes.includes(
            field.fieldRelevanceModeValKey,
          )
        ) {
          config.table.extra.dict.dictCodes.push(
            field.fieldRelevanceModeValKey,
          );
        }
        // 其他配置
        extra = {
          dictCode: field.fieldRelevanceModeValKey,
        };
      }
    }
    // 列展现设置
    switch (field.componentName) {
      case 'SparkEditor': {
        showType = 'html';

        break;
      }
      case 'SparkUploadFile': {
        showType = 'files';

        break;
      }
      case 'SparkUploadImg': {
        showType = 'image';

        break;
      }
      // No default
    }

    return genColumn(field, showType, index, extra, type);
  });
  mappingFieldsToColumns.unshift({
    title: '序号',
    field: undefined,
    align: 'center',
    type: 'seq',
    width: 50,
    fixed: 'left',
    visible: true,
    slots: undefined,
    showType: 'text',
    extra: {
      sequence: 2,
    },
  });

  if (type !== 1) {
    // 添加选择列
    mappingFieldsToColumns.unshift({
      title: '选择列',
      align: 'center',
      type: 'checkbox',
      width: 100,
      fixed: 'left',
      visible: true,
      slots: undefined,
      showType: 'text',
      extra: {
        sequence: 1,
      },
    });
  }

  // 添加操作列
  mappingFieldsToColumns.push({
    title: '操作',
    field: 'action',
    align: 'center',
    type: undefined,
    minWidth: 160,
    fixed: 'right',
    visible: true,
    slots: { default: 'action' },
    showType: 'text',
    extra: {
      sequence: 99,
    },
  });
  return mappingFieldsToColumns;
};

/**
 * 生成列
 * @param field 列信息
 * @param showType 展现形式
 * @param index 排序
 * @param extra 额外参数
 * @param type 类型 0Table 1TreeTable
 */
function genColumn(
  field: object,
  showType: string = 'text',
  index: number = 0,
  extra: object | undefined,
  type: number = 0,
) {
  let width = 100;
  if (field?.componentName === 'DateTimePicker') {
    width = 160;
  }
  return {
    title: field.fieldAnnotation,
    field: toCamelCase(field.fieldName),
    align: 'center',
    type: undefined,
    minWidth: width,
    visible: field.fieldName === 'create_time' ? true : field.isHandle,
    fixed: undefined,
    slots: undefined,
    showType,
    extra: {
      ...extra,
      sequence: field.isHandle ? index + 3 : 98,
    },
    treeNode: getTreeNode(field, type),
  } as TableType.TableColumns;
}

// 设置展开节点Tree
function getTreeNode(field: object, type: number = 0) {
  if (type === 1) {
    if (field.isHandle && !treeNode.value) {
      treeNode.value = true;
      return true;
    }
    return undefined;
  }
  return undefined;
}
